<template>
  <div class="login">
    <div class="a">
      <div class="b"></div>
      <div class="c">
        <div class="d">
          <h1><a href="#">高校宿舍信息管理系统</a></h1>
          <input type="text" class="e" placeholder="用户名" v-model="form.account">
          <input type="password" class="e" placeholder="密码" v-model="form.password">
          <button class="g" @click="login">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'login',
  data() {
    return {
      form: {
        account: '',
        password: ''
      },
    }
  },
  methods: {
    login() {
      // TODO
      let url = this.$api.user.login
      this.$http(url,this.reqData({
        "account": this.form.account,
        "password": this.form.password,
      })).then(res => {
        if (res.data.code == 200) {
          this.$router.push('/overView');
          sessionStorage.setItem('user',JSON.stringify(res.data.data))
          console.log(res)
        } else {
          this.$message({
            type: 'error',
            message: '用户名或密码错误！'
          })
        }
      })
    }
  },
  mounted() {

  }
}
</script>

<style lang="less" scoped>
.login {
  background: linear-gradient(to left, #9c88ff, #3cadeb);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
a {
  text-decoration: none;
  color: #000;
}
.a {
  position: relative;
  // top: 1rem;
  width: 80%;
  height: 5.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .8);
  display: flex;
}
.b {
  width: 70%;
  height: 5.5rem;
  background-image: url(@/assets/image/back.jpg);
  /* 图片自适应 */
  background-size: cover;
}
.c {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 5.5rem;
  background-color: #fff;
}
.d {
  width: 100%;
  height: 5.5rem;
  
}
.d h1 {
  font: 900 0.3rem '';
  width: 100%;
  height: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
}
.e {
  width: 70%;
  margin: 0.35rem 0.55rem;
  outline: none;
  border: 0;
  padding: 0.15rem;
  border-bottom: 3px solid #000;
  font: 900 0.18rem '';
}
.f { 
  float: right;
  margin: 10px 0;
}
.g {
  position: absolute;
  margin: 0 1rem;
  margin-top: 1rem;
  bottom: 40px;
  display: block;
  width: 2.5rem;
  height: 0.65rem;
  line-height: 0.65rem;
  border-radius: 0.3rem;
  border: 0;
  font: 900 0.22rem '';
  text-align: center;
  background: linear-gradient(to left, #9c88ff, #3cadeb);
  cursor: pointer;
}
</style>